<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>商品列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content=""/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- bootstrap-css -->
    <link rel="stylesheet" th:href="@{/lib/merchant/css/bootstrap.min.css}">
    <!-- //bootstrap-css -->
    <!-- Custom CSS -->
    <link th:href="@{/lib/merchant/css/style.css}" rel='stylesheet' type='text/css'/>
    <link th:href="@{/lib/merchant/css/style-responsive.css}" rel="stylesheet"/>
    <!-- font CSS -->
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic'
          rel='stylesheet' type='text/css'>
    <!-- font-awesome icons -->
    <link rel="stylesheet" th:href="@{/lib/merchant/css/font.css}" type="text/css"/>
    <link th:href="@{/lib/merchant/css/font-awesome.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/lib/merchant/css/morris.css}" type="text/css"/>
    <!-- calendar -->
    <link rel="stylesheet" th:href="@{/lib/merchant/css/monthly.css}">
    <!-- //calendar -->
    <!-- //font-awesome icons -->
    <script th:src="@{/lib/merchant/js/jquery2.0.3.min.js}"></script>
    <script th:src="@{/lib/merchant/js/raphael-min.js}"></script>
    <script th:src="@{/lib/merchant/js/morris.js}"></script>

    <style>
        input {
            background: ghostwhite;
            width: 175px;
            height: 181.8px;
            border: 0;
            text-align: center;
        }

        input:hover {
            background: lightgrey;
        }

        table {
            border: 3px solid crimson;
        }

        table tr {
            border: 2px solid black;
        }

        table td {
            border: 1px solid lightgrey;
            font-size: 14px;
        }
    </style>
</head>
<body>
<section id="container">
    <!--header start-->
    <header class="header fixed-top clearfix" th:include="merchant/common/model::header"></header>
    <!--header end-->
    <!--sidebar start-->
    <aside th:include="merchant/common/model::aside"></aside>
    <!--sidebar end-->

    <!--main content start-->
    <section id="main-content">
        <section class="wrapper">
            <table style="background:ghostwhite;font-size: 18px;position: relative;width: 50%;">
                <form class="addGoods" th:action="@{/merchant/add-goods}" method="post" enctype="multipart/form-data">
                    <tr style="height: 35px;background: #8b5c9e;color: white;">
                        <th style="text-align: center;">商品ID(状态)</th>
                        <th style="text-align: center;">图示(点击选择)</th>
                        <th style="text-align: center;">商品名称</th>
                        <th style="text-align: center;">商品描述</th>
                        <th style="text-align: center;">商品库存</th>
                        <th style="text-align: center;">单品价格</th>
                        <th style="text-align: center;">操作</th>
                    </tr>
                    <tr>
                        <td style="text-align: center;">
                            <p style="width:175px;color: purple">
                                <b>在此栏添加商品👉</b>
                            </p>
                        </td>
                        <td style="text-align: center;">
                            <img th:src="@{/image/user/home/product/5.jpg}" style="width: 144px;height: 181.8px"
                                 id="img0" onclick="upImg('input0')">
                            <input style="display: none" type="file" name="img" id="input0"
                                   onchange="showImg(this,'img0')">
                        </td>
                        <td style="text-align: center;">
                            <input type="text" placeholder="商品名称" name="name"
                                   style="text-align: center;height: 181.8px">
                        </td>
                        <td style="text-align: center;">
                            <input type="text" placeholder="商品描述" name="describe"
                                   style="text-align: center;height: 181.8px">
                        </td>
                        <td style="text-align: center;">
                            <input type="number" placeholder="商品库存" name="stock" min="0"
                                   style="text-align: center;height: 181.8px">
                        </td>
                        <td style="text-align: center;">
                            <input type="text" placeholder="单品价格" name="price"
                                   style="text-align: center;height: 181.8px">
                        </td>
                        <td style="text-align: center;font-weight: bold;">
                            <input type="submit" value="添加商品" style="text-align: center;height: 181.8px;color: purple">
                        </td>
                    </tr>
                </form>
                <!--/*@thymesVar id="goodsList" type="java.awt.List"*/-->
                <tr th:if="${goodsList} != null" th:each="goods,stat : ${goodsList}" style="height: 35px">
                    <form th:action="@{/merchant/update-goods}" method="post" enctype="multipart/form-data">

                        <td th:if="${goods.getState()==1}" style="text-align: center;">
                            <b>[[${goods.getId()}]]</b>
                            <p style="color: purple">(售卖中)</p>
                        </td>
                        <td th:if="${goods.getState()==0}" style="text-align: center;">
                            <b>[[${goods.getId()}]]</b>
                            <p style="color: grey">(已下架)</p>
                        </td>
                        <td style="text-align: center;">
                            <!--/*@thymesVar id="goods" type="com.example.jieyue.common.entity.SysGoods"*/-->
                            <!--/*@thymesVar id="getImg" type="java.lang.String"*/-->
                            <img th:src="@{${goods.getImg()}}" style="width: 144px;height: 181.8px"
                                 th:id="${'img'+stat.count}" th:onclick="upImg('input[[${stat.count}]]')">
                            <input style="display: none" type="file" name="img" th:id="${'input'+stat.count}"
                                   th:onchange="showImg(this,'img[[${stat.count}]]')">
                        </td>
                        <td style="text-align: center;">
                            <input type="number" hidden="hidden" th:value="${goods.getId()}" name="id">
                            <input th:value="${goods.getName()}" name="name">
                        </td>
                        <td style="text-align: center;">
                            <input th:value="${goods.getDescribe()}" name="describe">
                        </td>
                        <td style="text-align: center;">
                            <input type="number" min="0" th:value="${goods.getStock()}" name="stock">
                        </td>
                        <td style="text-align: center;color: purple">
                            <b>
                                <input th:value="${goods.getPrice()}" name="price">
                            </b>
                        </td>
                        <td style="text-align: center;">
                            <button type="button" style="background: orangered;color: white;border-radius: 5px;width: 50px;height: 30px"
                                    th:onclick="delGoods('[[${goods.getId()}]]')">
                                <b>删除</b>
                            </button>
                            <button type="submit" style="background: deepskyblue;color: white;border-radius: 5px;width: 50px;height: 30px"
                                    onclick="if (confirm('确认修改该商品的信息？')==false)return false; ">
                                <b>修改</b>
                            </button>

                            <button type="button" style="background: grey;color: white;border-radius: 5px;width: 50px;height: 30px"
                                    th:if="${goods.getState()==1}"
                                    th:onclick="offGoods('[[${goods.getId()}]]')">
                                <b>下架</b>
                            </button>

                            <button type="button" style="background: gold;color: white;border-radius: 5px;width: 50px;height: 30px"
                                    th:if="${goods.getState()==0}"
                                    th:onclick="putGoods('[[${goods.getId()}]]')">
                                <b>上架</b>
                            </button>
                        </td>
                    </form>
                </tr>
                <tr style="height: 50px">
                    <td colspan="7" style="text-align: right">
                        <form id="upPage" th:action="@{/merchant/goods}" method="get">
                            <input type="submit" value="上一页" onclick="delPage()"
                                   style="background: rebeccapurple;height: 40px;width: 70px;color: white;border-radius: 8px;">
                            [[${page}]]/[[${allPage}]]
                            <input type="submit" value="下一页" onclick="addPage()"
                                   style="background: rebeccapurple;height: 40px;width: 70px;color: white;border-radius: 8px;">
                            <input type="number" hidden name="page" id="page" th:value="${page}">
                        </form>
                    </td>
                </tr>
            </table>
            <br/><br/><br/>
        </section>
    </section>
    <!--main content end-->
</section>
<script th:inline="javascript">
    var page = document.getElementById('page');
    var flag = document.getElementById('flag');

    function addPage() {
        if (page.value < [[${allPage}]]) {
            page.value = page.value - 1 + 2;
        } else {
            alert("当前是最后一页");
        }
    }

    function delPage() {
        if (page.value > 1) {
            page.value = page.value - 1;
        } else {
            alert("当前是第一页");
        }
    }

    function showImg(input, id) {
        var file = input.files[0];
        var reader = new FileReader();

        // 图片读取成功回调函数
        reader.onload = function (e) {
            document.getElementById(id).src = e.target.result
        };
        reader.readAsDataURL(file)
    }

    function upImg(upImg) {
        document.getElementById(upImg).click();
    }

    function delGoods(goodsId) {
        if (confirm("确认删除此商品？")) {
            window.location = "/merchant/del-goods?id=" + goodsId;
        }
    }

    function putGoods(goodsId) {
        if (confirm("确认上架此商品？")) {
            window.location = "/merchant/put-goods?id=" + goodsId;
        }
    }

    function offGoods(goodsId) {
        if (confirm("确认下架此商品？")) {
            window.location = "/merchant/off-goods?id=" + goodsId;
        }
    }
</script>
<script th:include="merchant/common/model :: alertMsg"></script>

<script th:src="@{/lib/merchant/js/bootstrap.js}"></script>
<script th:src="@{/lib/merchant/js/jquery.dcjqaccordion.2.7.js}"></script>
<script th:src="@{/lib/merchant/js/scripts.js}"></script>
<script th:src="@{/lib/merchant/js/jquery.slimscroll.js}"></script>
<script th:src="@{/lib/merchant/js/jquery.nicescroll.js}"></script>
<script type="text/javascript" th:src="@{/lib/merchant/js/flot-chart/excanvas.min.js}"></script>
<script th:src="@{/lib/merchant/js/jquery.scrollTo.js}"></script>
<!-- morris JavaScript -->
<script>
    $(document).ready(function () {
        //BOX BUTTON SHOW AND CLOSE
        jQuery('.small-graph-box').hover(function () {
            jQuery(this).find('.box-button').fadeIn('fast');
        }, function () {
            jQuery(this).find('.box-button').fadeOut('fast');
        });
        jQuery('.small-graph-box .box-close').click(function () {
            jQuery(this).closest('.small-graph-box').fadeOut(200);
            return false;
        });

        //CHARTS
        function gd(year, day, month) {
            return new Date(year, month - 1, day).getTime();
        }

        graphArea2 = Morris.Area({
            element: 'hero-area',
            padding: 10,
            behaveLikeLine: true,
            gridEnabled: false,
            gridLineColor: '#dddddd',
            axes: true,
            resize: true,
            smooth: true,
            pointSize: 0,
            lineWidth: 0,
            fillOpacity: 0.85,
            data: [
                {period: '2015 Q1', iphone: 2668, ipad: null, itouch: 2649},
                {period: '2015 Q2', iphone: 15780, ipad: 13799, itouch: 12051},
                {period: '2015 Q3', iphone: 12920, ipad: 10975, itouch: 9910},
                {period: '2015 Q4', iphone: 8770, ipad: 6600, itouch: 6695},
                {period: '2016 Q1', iphone: 10820, ipad: 10924, itouch: 12300},
                {period: '2016 Q2', iphone: 9680, ipad: 9010, itouch: 7891},
                {period: '2016 Q3', iphone: 4830, ipad: 3805, itouch: 1598},
                {period: '2016 Q4', iphone: 15083, ipad: 8977, itouch: 5185},
                {period: '2017 Q1', iphone: 10697, ipad: 4470, itouch: 2038},

            ],
            lineColors: ['#eb6f6f', '#926383', '#eb6f6f'],
            xkey: 'period',
            redraw: true,
            ykeys: ['iphone', 'ipad', 'itouch'],
            labels: ['All Visitors', 'Returning Visitors', 'Unique Visitors'],
            pointSize: 2,
            hideHover: 'auto',
            resize: true
        });


    });
</script>
<!-- calendar -->
<script type="text/javascript" th:src="@{/lib/merchant/js/monthly.js}"></script>
<script type="text/javascript">
    $(window).load(function () {

        $('#mycalendar').monthly({
            mode: 'event',

        });

        $('#mycalendar2').monthly({
            mode: 'picker',
            target: '#mytarget',
            setWidth: '250px',
            startHidden: true,
            showTrigger: '#mytarget',
            stylePast: true,
            disablePast: true
        });

        switch (window.location.protocol) {
            case 'http:':
            case 'https:':
                // running on a server, should be good.
                break;
            case 'file:':
        }

    });
</script>
<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:include="merchant/common/model :: alertMsg"></script>

<!-- //calendar -->
</body>
</html>
